<div id="settingsPane">
  <div id="titleBar">
    <p>Preferences</p>
    <img id="close" class="button" src="images/close-button.svg" v-on="click: $root.toggleSettingsPane()">
  </div>
  <div id="optionsZone">
    <!-- Text size -->
    <div class="section">
      <p class="label">Text size</p>
      <span class="adjustButtonContainer">
        <img class="adjustButton button" src="images/minus-button.svg" v-on="click: decreaseFontSize">
        <label>Decrease</label>
      </span>
      <input id="textAdjustInput" type="text" v-model="fontSize" size=3>
      <span class="adjustButtonContainer">
        <img class="adjustButton button" src="images/plus-button.svg" v-on="click: increaseFontSize">
        <label>Increase</label>
      </span>
    </div>

    <!-- Indentation amount -->
    <div id="indentation" class="section">
      <p class="label">Indentation amount</p>
      <span class="adjustButtonContainer">
        <img class="adjustButton button" src="images/minus-button.svg" v-on="click: decreaseTabSize">
        <label>Decrease</label>
      </span>
      <input id="tabSize" type="text"  v-model="tabSizeDisplay" size=3 v-on="change: updateTabSize">
      <span class="adjustButtonContainer">
        <img class="adjustButton button" src="images/plus-button.svg" v-on="click: increaseTabSize">
        <label>Increase</label>
      </span>

      <div id="indentOptions" class="hiddenRadio radioOptions">
        <input type="radio" value="spaces" id="tabTypeS" v-model="tabType">
        <label class="radioSelection" for="tabTypeS">Spaces</label>
        <input type="radio" value="tabs" id="tabTypeT" v-model="tabType">
        <label class="radioSelection" for="tabTypeT">Tabs</label>
      </div>
    </div>

    <!-- Word wrap -->
    <div id="ww" class="section">
      <p class="label">Word wrap</p>
      <div id="wwOptions" class="hiddenRadio radioOptions">
        <input type="radio" value="true" id="wordWrapOn" v-model="wordWrap">
        <label class="radioSelection" for="wordWrapOn">On</label>
        <input type="radio" value="false" id="wordWrapOff" v-model="wordWrap">
        <label class="radioSelection" for="wordWrapOff">Off</label>
      </div>
    </div>

    <!-- Run in browser -->
    <div id="rib" class="section">
      <p class="label">Run in browser</p>
      <div id="ribOptions" class="hiddenRadio radioOptions">
        <input type="radio" value="true" id="runInBrowserOn" v-model="runInBrowser">
        <label class="radioSelection" for="runInBrowserOn">On</label>
        <input type="radio" value="false" id="runInBrowserOff" v-model="runInBrowser">
        <label class="radioSelection" for="runInBrowserOff">Off</label>
      </div>
    </div>

    <!-- Console orientation -->
    <div class="section hiddenRadio">
      <p id="consoleText" class="label">Console orientation</p>

      <input type="radio" name="consoleOrientation" id="consoleH" v-model="consoleOrientation" value="horizontal" >
      <label for="consoleH" class="left">
        <img id="browserIcon" src="images/consoleH.svg">
      </label>

      <input type="radio" name="consoleOrientation" id="consoleV" v-model="consoleOrientation" value="vertical" >
      <label for="consoleV" class="right">  
        <img id="browserIcon" src="images/consoleV.svg">
      </label>
    </div>

    <!-- Show sidebar -->
    <div id="ss" class="section">
      <p class="label">Show sidebar</p>
      <div id="ssOptions" class="hiddenRadio radioOptions">
        <input type="radio" value="true" id="showSidebarOn" v-model="showSidebar">
        <label class="radioSelection" for="showSidebarOn">On</label>
        <input type="radio" value="false" id="showSidebarOff" v-model="showSidebar">
        <label class="radioSelection" for="showSidebarOff">Off</label>
      </div>
    </div>



  </div>
</div>
